<template>
    <div class="infor">
        <div class="title">
            <span class="bord"></span>
            <span class="word">申请代理人</span>
        </div>
        <div class="list">
            <ul>
                <li class="clearfix">
                    <p class="pxpts">代理人姓名（必填）</p>
                    <input type="text" class="mobile" placeholder="请输入您的姓名" maxlength="6" v-model="agentApply.userName" @blur="nameBlur" @keyup="myKeyup($event)">
                </li>
                <li class="clearfix">
                    <p class="pxpts">身份证号（必填）</p>
                    <input type="text" class="mobile" placeholder="请输入您的身份证号" maxlength="18" v-model="agentApply.idCard" @blur="userBlur" @keyup="myKeyup($event)">
                </li>
                <li class="clearfix">
                    <p class="pxpts">手机号（必填）</p>
                    <input type="text" disabled="disabled" class="mobile" placeholder="请输入电话号码" maxlength="11" v-model="agentApply.phone" @blur="phoneBlur" onkeyup="this.value=this.value.replace(/[^0-9]+/,'');" @keyup="myKeyup($event)">
                    <!-- <input type="text"  class="mobile" placeholder="请输入电话号码" maxlength="11" v-model="agentApply.phone" @blur="phoneBlur" onkeyup="this.value=this.value.replace(/[^0-9]+/,'');" @keyup="myKeyup($event)"> -->
                </li>

                <li class="clearfix">
                    <p class="pxpts">银行卡号（必填）</p>
                    <input type="text" class="mobile" placeholder="请输入您的银行卡号" maxlength="19" v-model="agentApply.idBank" @blur="bankBlur" @keyup="myKeyup($event)">
                </li>
            </ul>

            <div class="tex"></div>
            <ul>
                <li class="clearfix">
                    <p class="pxpts">店铺名称</p>
                    <input type="text" class="mobile" placeholder="请输入您的店铺名称" maxlength="6" v-model="agentApply.shopName" @keyup="myKeyup($event)">
                </li>
                <li class="clearfix">
                    <p class="pxpts">店铺地址</p>
                    <input type="text" class="mobile" placeholder="请输入您的店铺地址" maxlength="6" v-model="agentApply.shopAddress" @keyup="myKeyup($event)">
                </li>
                <li class="clearfix">
                    <p class="pxpts">推荐人手机号</p>
                    <input type="text" class="mobile" placeholder="请输入推荐人手机号" maxlength="11" v-model="agentApply.rePhone" @keyup="myKeyup($event)" @blur="phoneBlur" onkeyup="this.value=this.value.replace(/[^0-9]+/,'');">
                </li>
            </ul>
            <div class="tex"></div>
            <div class="upload">
                <p class="upl">上传营业执照</p>
                <div class="photo" @click="isCshow=false">
                    <img :src="memImg" alt="" class="big_photo" id="pic">
                    <!-- <form @submit.prevent="submit($event)" action="" id="inputForm" type="button">
                        <div class="up">
                            <img :src="memImg" alt="" class="big_photo" id="pic">
                            <p class="chan_name">修改头像</p>
                            <input type="file" id="upload" accept="image/*" name="file" style="position: absolute; top: 72%; left: 0%; width: 150px; height:18% ;opacity: 0; margin:0;display:block;">
                        </div>
                    </form> -->
                </div>
            </div>
        </div>
        <div class="btn" @click="inforNow" v-if="isDshow==false">
            <span class="tijia">下一步</span>
        </div>
        <div class="btn currt" v-if="isDshow==true">
            <span class="tijia">下一步</span>
        </div>
        <div class="words">
            <!-- <span>您已阅读并同意</span> -->
            <!-- <span class="curts" @click="direct('ckhelp')">《蓄康荟代理人协议》</span> -->
        </div>

        <!-- 弹出层 -->
        <div class="mask" v-if="isAshow==true">
            <div class="hyfl">
                <div class="wordst">
                    <p>你的资料已经申请提交</p>
                    <p>我们2个工作日内进行审核</p>
                    <p>如有疑问请联系我们客服：</p>
                    <p>400-6666-688</p>
                </div>
                <div class="confirm">
                    <p>取消</p>
                    <p>确认</p>
                </div>
            </div>
        </div>
        <!-- 上传头像 -->
        <div class="change_tx clearfix" v-show="isCshow==false">
            <form @submit.prevent="submit($event)" action="" id="inputForm" type="button">
                <div class="up">
                    <img :src="memImg" alt="" class="big_photo" id="pic">
                    <p class="chan_name">点击选择营业执照上传</p>
                    <input class="iptst" type="file" id="upload" accept="image/*" name="file">
                </div>
            </form>
            <button class="gol_tx fl" @click="isCshow=true">取消上传</button>
            <button class="gor_tx fr" @click="saveLicess()">确认上传</button>
        </div>
    </div>
</template>

<script>
import Qs from 'qs'
import axios from 'axios'
import http from "@/assets/js/axios"
import https from "@/assets/js/axiosh"
import { domain } from '@/assets/js/config'
import { domains } from '@/assets/js/config'
import { maskTips, maskCallback } from '@/assets/js/dom'
import $ from 'jquery'
import { Toast } from 'mint-ui'
export default {
    name: 'userinfoPage',
    data() {

        return {
            isAshow: false,
            isBshow: false,
            isCshow: true,
            isDshow: false,
            userToken: '',
            agentApply: {
                bizPlatform: 'xkh',
                userName: '',
                idCard: '',
                phone: '',
                idBank: '',
                shopName: '',
                shopAddress: '',
                isAuth: '',
                rePhone: '',
                desc: '',
                img: '',
            },
            fromData: '',
            show: true,
            count: '',
            timer: null,
            memImg: require('../../assets/imgs/agent/photo.png'),
        }
    },
    components: {

    },
    created() {
        let userToken = localStorage.getItem("token") || ''
        this.userToken = userToken
        this.getReason();
    },
    mounted() {

        // sessionStorage.removeItem('mobie')

        let userType = localStorage.getItem("userType") || ''

        if (!this.userToken) {
            this.$router.push('/index')
        }

        function getObjectURL(file) {
            var url = null;
            if (window.createObjectURL != undefined) { // basic
                url = window.createObjectURL(file);
            } else if (window.URL != undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file);
            } else if (window.webkitURL != undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file);
            }
            return url;
        }
        // 点击上传营业执照
        function upimg() {
            var r = new FileReader();
            var f = $('#upload')[0].files[0];
            r.readAsDataURL(f);
            r.onload = function (e) {
                $('.big_photo').src = this.result;
            };
        };
        $("#upload").click(); //隐藏了input:file样式后，点击按钮就可以本地上传
        $("#upload").on("change", function () {
            var objUrl = getObjectURL(this.files[0]); //获取图片的路径，该路径不是图片在本地的路径
            if (objUrl) {
                $(".big_photo").attr("src", objUrl); //将图片路径存入src中，显示出图片
                upimg();
            };
        });
    },
    methods: {
        direct: function (val) {
            this.$router.push({ path: '/' + val });
        },
        myKeyup: async function (e) {
            var keycode = window.event ? e.keyCode : e.which;
            if (keycode == 13) {
                // this.registerNow();
            }
        },
        // 用户信息
        getReason: async function () {
            const res = await https.post('f/agent/home/preInfo?token=' + this.userToken)
            // console.log(res);
            if (res.data.code == 100) {
                this.agentApply.userName = res.data.data.userName || '';
                this.agentApply.idCard = res.data.data.idCard || '';
                this.agentApply.phone = res.data.data.mobile || '';
                this.agentApply.idBank = res.data.data.bankId || '';
                this.agentApply.isAuth = res.data.data.uthenticationStatus;
                if (res.data.data.progress == '0') {
                    // Toast({ message: '你还不是代理用户，请前去申请', duration: 1000 });
                    // this.isAshow = true;
                    // sessionStorage.removeItem('mobie')
                    // sessionStorage.setItem('mobie', this.queryParam.mobile)
                } else if (res.data.data.progress == '1') {
                    // Toast({ message: '代理用户申请中', duration: 1000 });
                    sessionStorage.setItem('agentId', res.data.data.agentId)
                    if (res.data.data.agQuestion == 'true') {
                        this.$router.push({ path: "/selectType" });
                    } else if (res.data.data.agQuestion == 'false') {
                        this.$router.push({ path: "/agQuestion" });
                    }

                } else if (res.data.data.progress == '2') {
                    Toast({ message: '申请成功，请前往代理中心登录', duration: 2000 })
                    this.isDshow = true;
                    // this.$router.push('/ckCenter')
                } else if (res.data.data.progress == '3') {
                    Toast({ message: '代理申请失败，请重新申请', duration: 1000 });
                    // this.$router.push('/agProg')
                }
            }
        },

        inforNow: async function () {
            if (this.agentApply.userName && this.agentApply.idCard && this.agentApply.phone && this.agentApply.idBank) {
                if (!/^[\u4e00-\u9fa5]{2,6}$/.test(this.agentApply.userName)) {
                    Toast({ message: '姓名格式不正确！', duration: 1000 })
                } else if (!/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9xX]$/.test(this.agentApply.idCard)) {
                    Toast({ message: '身份证格式不正确！', duration: 1000 })
                } else if (!/^1[3|4|5|7|8][0-9]\d{8}$/.test(this.agentApply.phone)) {
                    Toast({ message: '请输入正确的手机号！', duration: 1000 })
                } else if (!/^[0-9]{16,19}$/.test(this.agentApply.idBank)) {
                    Toast({ message: '银行卡格式不正确！', duration: 1000 })
                } else {
                    const res = await https.post('f/apply/savebank?token=' + this.userToken, this.agentApply)
                    // console.log(res);
                    if (res.data.code == 100) {
                        sessionStorage.setItem('agentId', res.data.data.agentId)
                        this.$router.push({ path: "/agQuestion" });
                    } else if (res.data.code == -1) {
                        // console.log(res);
                        Toast({ message: res.data.message, duration: 1000 })
                        // this.$router.push({ path: "/selectType" });
                    } else {
                        Toast({ message: res.data.message, duration: 1000 });
                        // this.$router.push({ path: "/agProg" });
                    }
                }
            } else {
                Toast({ message: '请把必填数据填写完整，再提交！', duration: 1000 })
            }
        },
        // 上传营业执照
        saveLicess: function () {
            var that = this
            if ($("#file").val() == '') {
                Toast({ message: '请选择图片后再提交，再提交！', duration: 1000 })
                $("#file").focus();
                return false;
            };
            var userToken = localStorage.getItem("token") || '' //用户token值
            var file = new FormData($('#inputForm')[0]);//form提交文件格式
            $.ajax({
                type: "post",
                url: domains + "/f/home/oploadImg?token=" + userToken,
                dataType: 'json',
                contentType: false,
                processData: false,
                mimeType: "multipart/form-data",
                data: file,
                success: function (res) {
                    // console.log(res)
                    if (res.code == 100) {
                        that.agentApply.img = res.data
                        Toast({ message: '上传成功！', duration: 2000 })
                        that.isCshow = true;
                    } else {
                        Toast({ message: '上传失败！', duration: 2000 })
                    }
                }
            });
        },
        phoneBlur: async function () {
            const _this = this
            if (_this.agentApply.phone) {
                _this.usernameTips = false;
                if (!/^1[3|4|5|7|8][0-9]\d{8}$/.test(_this.agentApply.phone)) {
                    Toast({ message: '请输入正确的手机号！', duration: 1000 })
                }
            } else {
                _this.usernameTips = true;
            }
        },
        codeBlur: async function () {
            const _this = this
            if (_this.agentApply.code) {
                _this.usernameTips = false;
                if (!/^[0-9]{4,6}$/.test(_this.agentApply.code)) {
                    Toast({ message: '请输入正确的验证码！', duration: 1000 })
                }
            } else {
                _this.usernameTips = true;
            }
        },
        nameBlur: async function () {
            const _this = this
            if (_this.agentApply.userName) {
                _this.usernameTips = false;
                if (!/^[\u4e00-\u9fa5]{2,6}$/.test(_this.agentApply.userName)) {
                    Toast({ message: '请输入正确的姓名格式！', duration: 1000 })
                }
            } else {
                _this.usernameTips = true;
            }
        },
        bankBlur: async function () {
            const _this = this
            if (_this.agentApply.idBank) {
                _this.usernameTips = false;
                if (!/^[0-9]{16,19}$/.test(_this.agentApply.idBank)) {
                    Toast({ message: '请输入正确的银行卡格式！', duration: 1000 })
                }
            } else {
                _this.usernameTips = true;
            }
        },
        userBlur: async function () {
            const _this = this
            if (_this.agentApply.idCard) {
                _this.usernameTips = false;
                if (!/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9xX]$/.test(_this.agentApply.idCard)) {
                    Toast({ message: '请输入正确的身份证格式！', duration: 1000 })
                }
            } else {
                _this.usernameTips = true;
            }
        },
    }
}
</script>

<style lang="stylus" scoped>
.infor {
    .title {
        margin-left: 30px;

        .bord {
            display: inline-block;
            width: 6px;
            height: 20px;
            background: rgba(194, 223, 90, 1);
        }

        .word {
            font-size: 24px;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            color: rgba(0, 0, 0, 1);
        }
    }

    .list {
        margin-top: 20px;

        .upload {
            padding: 10px 30px;

            .upl {
                font-size: 16px;
            }

            .photo {
                margin-top: 10px;
                height: 100px;
                line-height: 100px;
                width: 100px;
                border: 1px solid #f0f0f0;
                text-align: center;

                img {
                    width: 100px;
                    height: 100px;
                }

                .chan_name {
                    text-align: center;
                    font-size: 16px;
                    line-height: 56px;
                    color: #c3c3c3;
                    font-family: 'PingFang-SC-Regular';
                }
            }
        }

        .tex {
            width: 100%;
            height: 12px;
            background-color: #f0f0f0;
        }

        ul {
            padding: 0 30px;

            li {
                border-bottom: 1px solid #f0f0f0;
                position: relative;
                height: 50px;
                line-height: 50px;

                .pxpts {
                    float: left;
                    font-size: 12px;
                    font-family: MicrosoftYaHei;
                    color: rgba(128, 128, 128, 1);
                }

                .mobile {
                    background-color: #fff;
                    text-align: right;
                    text-indent: right;
                    float: right;
                    margin-top: 15px;
                    font-size: 12px;
                    color: rgba(0, 0, 0, 1);
                    width: 160px;
                    height: 20px;
                }
            }
        }
    }

    .btn {
        background: #f0f0f0;
        margin: 0 auto;
        margin-top: 30px;
        text-align: center;
        font-family: MicrosoftYaHei;

        .tijia {
            display: inline-block;
            width: 334px;
            height: 50px;
            line-height: 50px;
            border-radius: 10px;
            color: #fff;
            font-size: 20px;
            background: #c2df5a;
        }
    }

    .currt {
        background: #f0f0f0;

        .tijia {
            background: #999;
        }
    }

    .words {
        background-color: #f0f0f0;
        // margin: 0 auto;
        padding-top: 10px;
        padding-bottom: 60px;
        text-align: center;
        width: 100%;

        span {
            font-size: 12px;
            color: #999;
        }

        .curts {
            color: #0054FF;
        }
    }

    .mask {
        position: fixed;
        box-sizing: border-box;
        left: 0px;
        top: 0px;
        right: 0px;
        bottom: 0px;
        background-color: rgba(0, 0, 0, 0.85);
        z-index: 99;

        .hyfl {
            margin: 0 auto;
            margin-top: 130px;
            width: 255px;
            height: 200px;
            background-color: #fff;
            position: relative;

            .wordst {
                font-size: 16px;
                text-align: center;
                padding: 30px 0;
            }

            .confirm {
                position: absolute;
                bottom: 0px;
                text-align: center;
                width: 100%;
                height: 50px;
                line-height: 50px;
                border-top: 1px solid #f0f0f0;

                p {
                    float: left;
                    width: 50%;
                    font-size: 16px;
                    font-family: Adobe Heiti Std R;
                    font-weight: normal;
                    color: rgba(153, 153, 153, 1);
                }

                p:nth-child(2) {
                    border-left: 1px solid #f0f0f0;
                    color: #A6D400;
                }
            }
        }
    }

    .change_tx {
        position: fixed;
        box-sizing: border-box;
        left: 0px;
        top: 0px;
        right: 0px;
        bottom: 0px;
        background-color: rgba(0, 0, 0, 0.85);
        // background-color: #fff;
        z-index: 99;
        width: 100%;
        height: auto;

        .up {
            width: 100%;
            height: 334px;
            padding: 38px 0;
            box-sizing: border-box;

            .big_photo {
                width: 220px;
                height: 220px;
                margin: 0 auto;
                display: block;
                // border-radius: 50%;
            }

            .chan_name {
                text-align: center;
                font-size: 20px;
                line-height: 56px;
                color: #c3c3c3;
                font-family: 'PingFang-SC-Regular';
            }

            .iptst {
                position: absolute;
                top: 0;
                left: 0%;
                width: 100%;
                height: 48%;
                opacity: 0;
                margin: 0;
                display: block;
            }
        }

        .gol_tx {
            border-radius: 30px;
            margin-left: 5%;
            width: 40%;
            height: 50px;
            outline: none;
            border: none;
            color: #fff;
            background: #aad114;
            font-size: 20px;
        }

        .gor_tx {
            border-radius: 30px;
            margin-right: 5%;
            width: 40%;
            height: 50px;
            outline: none;
            border: none;
            color: #fff;
            background: #aad114;
            font-size: 20px;
        }
    }
}
</style>
